<template>
  <div class="product-list">
    <div class="btnCopy space-between">
      <div class="paddingMine" style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;">
        <div>{{paramUrlSet.mineYear}}年销售计划</div>
        <div><el-button type="primary" size="mini" @click="backMine">返回</el-button></div>
      </div>
    </div>
    <span>
      年计划总额<span style="font-size:18px;color:#ffc323">{{(priceTotal.yearPlanAmount || 0)/10000}}</span>
      万,年计划总量<span style="font-size:18px;color:#ffc323">{{(priceTotal.yearPlanCount || 0)/10000}}</span>
      万,完成度<span style="font-size:18px;color:#ffc323">{{(priceTotal.yearFinishRatio || '0.00%')}}</span>
    </span>
    <div class="space-between" style="display: flex;margin-top: 20px">
      <el-form :inline="true" class="demo-form-inline single-form-inline planS" size="mini">
        <el-form-item label="品类">
          <el-select  size="mini" placeholder="请选择" v-model="firstCate" @change="onCateChangeSetFirst">
            <el-option v-for="(item,index) in firstCateList" :key="index"
                       :label="item.categoryName" :value="item.categoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select  size="mini" placeholder="请选择" v-model="secondCate" @change="onCateChangeSetSecond">
            <el-option v-for="(item,index) in secondCateList"
                       :key="index" :label="item.categoryName" :value="item.categoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="productdName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" size="mini" @click="getDataMineSet(productdName, firstCate, secondCate)">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-radio-group  size="mini" v-model="isNoPlan" @change="getDataMineSet(productdName, firstCate, secondCate)">
          <el-radio-button label='2'>全部</el-radio-button>
          <el-radio-button label="0">只看有计划</el-radio-button>
          <el-radio-button label="1">只看无计划</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <el-table :data="twoPageTable"
              size="mini" style="width: 100%;margin-top:20px">
      <el-table-column
        prop="productCode"
        label="产品型号"
        width="180px">
      </el-table-column>
      <el-table-column
        prop="categoryName"
        width="160px"
        label="所属品类">
      </el-table-column>
      <el-table-column
        prop="productType"
        label="组合类型">
      </el-table-column>
      <el-table-column
        prop="guidePrice"
        label="产品均价(元)"
        width="180px"
        sortable>
      </el-table-column>
      <el-table-column
        prop="planSalesNumber"
        sortable
        width="160px"
        label="年计划销量(件)">
      </el-table-column>
      <el-table-column
        prop="planSaleAmount"
        sortable
        label="年计划销额(元)">
      </el-table-column>
      <el-table-column
        prop="completionRateString"
        label="完成度"
        sortable>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="productBox = true;checkChart(scope.row.productCode,currentYear)">销售趋势</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogPlanTitle" :visible.sync="productBox" width="45%">
      <div class="">
        <el-select size="mini" style="width: 100px" placeholder="请选择" v-model="monthYear" @change="checkChart(proCode,monthYear)">
          <el-option v-for="(n,index) in 10" :key="index"
                     :label="currentYear-n+1" :value="currentYear-n+1">
          </el-option>
        </el-select>
        <div id="saleSummaryCharts" style="height: 300px;width:100%;margin:10px"></div>
      </div>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </div>
</template>

<script>
  import * as opreate from 'api/getData'

  export default {
    name: "product-list",
    data(){
      return{
        priceTotal: 0,
        sellTotal: 0,
        firstCate:'全部',
        firstCateList:[],
        secondCate:'全部',
        secondCateList:[],
        productdName: null,
        twoPageTable:[],
        mainchart:'',
        dialogPlanTitle:'',
        proCode:'',
        productBox:false,
        currentYear:new Date().getFullYear(),
        monthYear:new Date().getFullYear(),
        hasPlans:true,
        isNoPlan:2,
        mineYearSet: localStorage.getItem('editYear'),
        paramUrlSet: ''
      }
    },
    mounted(){
      this.paramUrlSet = this.$route.params
      this.getDataMineSet()
      this.getCategory()
      this.getSecondCategory()
    },
    methods:{
      backMine(){
        this.$router.back(-1)
      },
      onCateChangeSetFirst(categoryId){
        this.getSecondCategory(categoryId)
        this.getDataMineSet(this.productdName, categoryId, this.secondCate)
      },
      onCateChangeSetSecond(categoryId){
        this.getDataMineSet(this.productdName, this.firstCate, categoryId)
      },
      getCategory(){
        opreate.getFirstCateSet({}).then(res => {
          this.firstCateList = [ {categoryName:'全部',categoryId:'全部'}, ...res.data ]
        })
      },
      planSelect(newVal){
        this.hasPlans = '2' == newVal
      },
      getSecondCategory(firstCate = null){
        opreate.getSecondCateSet({
          categoryId: firstCate == '全部' ? null : firstCate
        }).then(res => {
          this.secondCateList = [ {categoryName:'全部',categoryId:'全部'},...res.data ]
        })
      },
      checkChart(productCode,dateTime){
        this.dialogPlanTitle = `${productCode} ${dateTime}销售计划`
        this.proCode = productCode
        opreate.getSaleMonthData({ productCode, dateTime }).then(res => {
          let myChart = this.$echarts.init(document.getElementById('saleSummaryCharts'));
          this.mainchart = res.data[1]
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
              formatter:'{b}<br />{a0}: {c0}万件<br />{a1}: {c1}%<br />{a2}: {c2}万元<br />{a3}: {c3}%'
            },
            legend: {
              data:['销售量','销量环比','销售额','销额环比']
            },
            xAxis: [
              {
                type: 'category',
                data: this.mainchart.map(item => item.dateTime)
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '销售量/销售额（万）',
                axisLabel: {
                  formatter: '{value} '
                }
              },
              {
                type: 'value',
                name: '环比',
                axisLabel: {
                  formatter: '{value} '
                }
              }
            ],
            series: [
              {
                name:'销售量',
                type:'bar',
                yAxisIndex: 0,
                itemStyle: {
                  color: '#9c96e7'
                },
                data:this.mainchart.map(item => item.actualSalesCount/10000)
              },
              {
                name:'销量环比',
                type:'line',
                smooth: true,
                yAxisIndex: 1,
                itemStyle: {
                  color: '#9c96e7'
                },
                data:this.mainchart.map(item => item.actualSalesCountRingRatio)
              },
              {
                name:'销售额',
                type:'bar',
                yAxisIndex: 0,
                itemStyle: {
                  color: '#64bef5'
                },
                data:this.mainchart.map(item => item.actualSalesAmount/10000)
              },
              {
                name:'销额环比',
                type:'line',
                smooth: true,
                yAxisIndex: 1,
                itemStyle: {
                  color: '#64bef5'
                },
                data:this.mainchart.map(item => item.actualSalesAmountRingRatio)
              },
            ]
          };
          myChart.setOption(option);  // 使用刚指定的配置项和数据显示图表
        })
      },
      getDataMineSet(productName = null, firstCate = null, secondCate = null){
        let cateParam = '全部' == secondCate ? firstCate : secondCate
        let tempSet = {
          productName: productName == ''? null: productName,
          categoryId: cateParam == '全部'? null: cateParam,
          isNoPlan: this.isNoPlan == '2'? null : this.isNoPlan
        }
        let { mineYear, draftId } = this.paramUrlSet
        opreate.getPlanHistoryDraft(Object.assign(tempSet,{ yearPlanTime: mineYear, draftId: draftId})).then(res => {
          this.twoPageTable = res.data.list
          this.priceTotal = res.data
        })
      }
    },
    watch:{
      firstCate(newVal){
        this.secondCate = '全部'
      }
    }
  }
</script>

<style scoped>

</style>
